<template>
  <div class="panel">
    <div class="title">
      <i class="left iconfont" :class="icon ? icon : ''" v-if="icon"/>
      <div class="middle" v-if="tabs.length === 0">
        {{ text }}
      </div>
      <div class="tabs" v-else>
        <div v-for="(tab, index) of getTab" :key="index" @click="onTabChange(tab, index)" :class="active === index ? 'active' : ''">
          {{ tab.name }}
        </div>
      </div>
      <div class="right">
        <slot name="right"/>
      </div>
    </div>
    <div class="content">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    icon: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    tabs: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      active: 0
    }
  },
  computed: {
    getTab() {
      const len = this.tabs.length
      let tabs = []
      for (let index = 0; index < len; index++) {
        const tab = this.tabs[index]

        if (typeof tab === 'string') {
          tabs.push({
            name: tab,
            value: tab
          })
        } else {
          tabs.push(tab)
        }

        if (index < len - 1) {
          tabs.push({ name: '|' })
        }
      }
      return tabs
    }
  },
  methods: {
    onTabChange(tab, index) {
      if (tab.value === undefined) return
      if (this.active === index) return
      this.active = index
      this.$emit('onTabChange', tab)
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/mixins.less';
@import '~@/style/variable.less';
.panel{
  .title{
    display: flex;
    height: 40px;
    padding: 0 7px;
    .left,.right{
      width: 30px;
      line-height: 40px;
      text-align: center;
    }
    .right{
      width: 60px;
    }
    .middle,.tabs{
      flex: auto;
      line-height: 40px;
    }
    .middle{
      font-weight: bold;
      font-size: @font-size-normal;
      .ellipsis()
    }
    .tabs{
      display: flex;
      color: @text-color-light;
      >div {
        margin-left: 5px;
      }
      .active{
        color: @text-color;
        font-weight: bold;
      }
      :nth-child(even) {
        color: #666;
      }
    }
  }
}
</style>